<template>
  <div>
    <el-form
      ref="form"
      :model="query"
      size="small"
      label-width="80px"
      style="padding: 10px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('route.subjectsList')">
            <el-select v-model="query.subjectID" placeholder="请选择">
              <el-option
                v-for="item in subject"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.SecondaryDirectory')">
            <el-select @focus='onFocus' v-model="query.catalogID" placeholder="请选择">
              <el-option v-for="item in catalog" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.tags')">
            <el-select @focus="onFocusTags" v-model="query.tags" placeholder="请选择">
              <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.keyword')" placeholder="请根据题干搜索" >
            <el-input v-model="query.keyword" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.testType')">
            <el-select v-model="query.questionType" placeholder="请选择">
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.difficulty')">
            <el-select v-model="query.difficulty" placeholder="请选择">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.direction')">
            <el-select v-model="query.direction" placeholder="请选择">
              <el-option v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.enterPeople')">
            <el-select @focus="onDirection" v-model="query.direction" placeholder="请选择">
              <el-option v-for="item in directionList" :key="item.id" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('table.remarks')">
            <el-input v-model="query.remarks" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('table.EnterpriseName')">
            <el-input v-model="query.shortName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('route.city')">
            <el-select
              v-model="query.province"
              size="small"
              placeholder="请选择"
              style="width: 100px"
            >
              <el-option  v-for="item in provincesList" :key='item' :label="item" :value="item"></el-option>
            </el-select>
            <el-select
              v-model="query.city"
              size="small"
              placeholder="请选择"
              style="width: 100px; paddingLeft: 5px"
              @focus="onFocusCity"
            >
              <el-option  v-for="item in cityList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button @click="removeData">{{$t("route.reset")}}</el-button>
          <el-button type="primary" @click="onSubmit">{{$t("table.search")}}</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { simple as usersSimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice } from '@/api/hmmm/questions'
export default {
  name: 'QuestionForm',
  props: {
    subject: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      query: {
        // 当前页数
        page: 1,
        // 页数
        pagesize: 10,
        // 学科
        subjectID: '',
        // 难度
        difficulty: '',
        // 试题类型
        questionType: '',
        // 标签名称
        tags: '',
        // 企业所在地省份
        province: '',
        // 企业所在城市
        city: '',
        // 关键字
        keyword: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 目录
        catalogID: '',
        // 审核状态
        chkState: ''
      },
      // 二级目录列表
      catalog: [],
      // 标签列表
      tagsList: [],
      // 录入人列表
      directionList: [],
      // 提醒
      questionType: questionType,
      // 难度
      difficulty: difficulty,
      // 方向
      direction: direction,
      // 省份,
      provincesList: provinces(),
      // 城市
      cityList: []
    }
  },
  created () {
    this.query = {}
  },
  methods: {
    // 获取二级分类列表
    async onFocus () {
      if (this.query.subjectID) {
        const { data } = await simple(this.query)
        this.catalog = data
      }
    },
    // 获取标签列表
    async onFocusTags () {
      if (this.query.subjectID) {
        const { data } = await tagsSimple(this.query)
        this.tagsList = data
      }
    },
    // 获取超级管理员
    async onDirection () {
      const { data } = await usersSimple()
      this.directionList = data
    },
    // 发送请求
    async onSubmit () {
      const { data } = await choice(this.query)
      console.log(data)
      this.$emit('on-success', data.items)
    },
    // 城市
    onFocusCity () {
      if (this.query.province) {
        const res = citys(this.query.province)
        this.cityList = res
      }
    },
    // 清除数据
    removeData () {
      this.query = {}
      this.onSubmit()
    }
  }
}
</script>

<style scoped lang="less"></style>
